<template>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-2">
        <div class="container-fluid container">
            <router-link class="navbar-brand" to="/">者也专栏</router-link>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02"
                aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="d-flex list-inline mb-0" v-if='!userName'>
                <li class="list-inline-item">
                    <router-link to="/login" class="btn btn-outline-light my-2">登录</router-link>
                </li>
                <span
                    :style="{ 'margin-right': '10px', 'line-height': '65px', 'font-weight': 700, 'color': 'white' }">OR</span>
                <li class="list-inline-item">
                    <router-link to="/regist" class="btn btn-outline-light my-2">注册</router-link>
                </li>
            </div>
            <div v-else class="d-flex list-inline mb-0">
                <DownSlect :context="`您好 ${userName}`" :data="slectOptions" @onButtonClick="testFun1"
                    @onSlict='testFun2' />
            </div>
        </div>
    </nav>
</template>

<script lang='ts'>
import { computed, defineComponent } from 'vue'
import DownSlect from '../DownSlect/index.vue'
import { useStore } from 'vuex'
import { Message } from '../../coustom/Message'
import { useRouter } from 'vue-router'

interface SlectType {
    titel: string,
    key: string
}

type SlectArrType = Array<SlectType>
export default defineComponent({
    name: 'Header',
    components: { DownSlect, },

    setup() {
        const router = useRouter()
        const store = useStore()
        const colomID = computed(() => store.getters.colomId)
        const slectOptions: SlectArrType = [
            {
                titel: '新建文章',
                key: 'news'
            },
            {
                titel: '我的专栏',
                key: 'column'
            },
            {
                titel: '编辑资料',
                key: 'compile'
            },
            {
                titel: '退出登录',
                key: 'quit'
            }
        ]
        const testFun1 = () => {
            console.log('我是事件1')
        }
        const quitLogin = () => {
            localStorage.setItem('token', '')
            store.dispatch('getUsetData')
        }
        const testFun2 = (item: SlectType) => {
            const { key } = item
            switch (key) {
                case "quit":
                    quitLogin()
                    Message.success('退出成功')
                    break
                case 'news':
                    router.push('/create')
                    break
                case 'column':
                    router.push(`/column/${colomID.value}`)
                    break
                case 'compile':
                    router.push('/edit')
                    break

            }
        }
        const userName = computed(() => store.getters.userName)
        return { testFun1, testFun2, userName, slectOptions }
    },

})
</script>
<style scoped>
</style>